<template>

	<div align="center">
		<div style="width: 60%;border-radius: 5px;">
			<div style="text-align: left;margin-top: 10px;margin-bottom: 20px;">
				<span style="font-size: 30px;font-weight: 900;">低价地图</span>
				<span style="margin-left: 10px;">目的地:</span>
				<div id="cityName"
					style="display: inline-block;width: 100px;border-bottom: 1px rgb(168, 168, 168, 0.4) solid;margin-left: 10px;text-align: center;">
					<span @click="cityNameIs=!cityNameIs" style="font-weight: 900;">
						{{cityName}}
					</span>

					<div v-if="cityNameIs"
						style="height:300px;width:600px;background-color: #FFFFFF;position:absolute;border: rgb(0, 0, 0,0.1) 1px solid;border-radius: 5px;padding: 20px;z-index: 900;margin-top: 10px;">
						<el-tabs>
							<el-tab-pane label="全中国">
								<div style="height:260px;overflow: scroll;">
									<div v-for="item in cityList" v-if="checkAbc(item.name)"
										style="margin-bottom: 10px;">
										<div
											style="margin-bottom: 5px;font-size: 13px;color: #989898;text-align: left;">
											{{item.name}}:
										</div>
										<el-row>
											<a href="javascript:;" style="text-decoration:none;color: black;"
												v-for="item2 in item.data" @click="destinationSelect(item2.city_name)">
												<el-col :span="3" class="col"
													style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
													{{item2.city_name}}
												</el-col>
											</a>
										</el-row>
									</div>
								</div>
							</el-tab-pane>
							<el-tab-pane label="美洲">
								<div style="height:260px;overflow: scroll;">
									<div v-for="item in cityList" v-if="item.name==='美洲'" style="margin-bottom: 10px;">
										<el-row>
											<a href="javascript:;" style="text-decoration:none;color: black;"
												v-for="item2 in item.data" @click="destinationSelect(item2.city_name)">
												<el-col :span="3" class="col"
													style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
													{{item2.city_name}}
												</el-col>
											</a>
										</el-row>
									</div>
								</div>
							</el-tab-pane>
							<el-tab-pane label="欧洲">
								<div style="height:260px;overflow: scroll;">
									<div v-for="item in cityList" v-if="item.name==='欧洲'" style="margin-bottom: 10px;">
										<el-row>
											<a href="javascript:;" style="text-decoration:none;color: black;"
												v-for="item2 in item.data" @click="destinationSelect(item2.city_name)">
												<el-col :span="3" class="col"
													style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
													{{item2.city_name}}
												</el-col>
											</a>
										</el-row>
									</div>
								</div>
							</el-tab-pane>
							<el-tab-pane label="大洋洲">
								<div style="height:260px;overflow: scroll;">
									<div v-for="item in cityList" v-if="item.name==='大洋洲'" style="margin-bottom: 10px;">
										<el-row>
											<a href="javascript:;" style="text-decoration:none;color: black;"
												v-for="item2 in item.data" @click="destinationSelect(item2.city_name)">
												<el-col :span="3" class="col"
													style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
													{{item2.city_name}}
												</el-col>
											</a>
										</el-row>
									</div>
								</div>
							</el-tab-pane>
							<el-tab-pane label="亚洲">
								<div style="height:260px;overflow: scroll;">
									<div v-for="item in cityList" v-if="item.name==='亚洲'" style="margin-bottom: 10px;">
										<el-row>
											<a href="javascript:;" style="text-decoration:none;color: black;"
												v-for="item2 in item.data" @click="destinationSelect(item2.city_name)">
												<el-col :span="3" class="col"
													style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
													{{item2.city_name}}
												</el-col>
											</a>
										</el-row>
									</div>
								</div>
							</el-tab-pane>
							<el-tab-pane label="非洲">
								<div style="height:260px;overflow: scroll;">
									<div v-for="item in cityList" v-if="item.name==='非洲'" style="margin-bottom: 10px;">
										<el-row>
											<a href="javascript:;" style="text-decoration:none;color: black;"
												v-for="item2 in item.data" @click="destinationSelect(item2.city_name)">
												<el-col :span="3" class="col"
													style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
													{{item2.city_name}}
												</el-col>
											</a>
										</el-row>
									</div>
								</div>
							</el-tab-pane>
							<el-tab-pane label="区域">
								<div style="height:260px;overflow: scroll;">
									<div style="margin-bottom: 10px;">
										<el-row>
											<a href="javascript:;" style="text-decoration:none;color: black;"
												@click="destinationSelect('全中国')">
												<el-col :span="3" class="col"
													style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
													全中国
												</el-col>
											</a>
											<a href="javascript:;" style="text-decoration:none;color: black;"
												@click="destinationSelect('美洲')">
												<el-col :span="3" class="col"
													style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
													美洲
												</el-col>
											</a>
											<a href="javascript:;" style="text-decoration:none;color: black;"
												@click="destinationSelect('亚洲')">
												<el-col :span="3" class="col"
													style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
													亚洲
												</el-col>
											</a>
											<a href="javascript:;" style="text-decoration:none;color: black;"
												@click="destinationSelect('非洲')">
												<el-col :span="3" class="col"
													style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
													非洲
												</el-col>
											</a>
											<a href="javascript:;" style="text-decoration:none;color: black;"
												@click="destinationSelect('欧洲')">
												<el-col :span="3" class="col"
													style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
													欧洲
												</el-col>
											</a>
											<a href="javascript:;" style="text-decoration:none;color: black;"
												@click="destinationSelect('大洋洲')">
												<el-col :span="3" class="col"
													style="text-align: center;margin-right: 10px;margin-bottom: 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
													大洋洲
												</el-col>
											</a>
										</el-row>
									</div>
								</div>
							</el-tab-pane>
						</el-tabs>
					</div>
				</div>

				<a href="/MapQuery" style="text-decoration:none;">
					<span
						style="float: right;font-weight: 900;color: rgba(0, 170, 255);margin-top: 10px;font-size: 17px;">更多目的地</span>
				</a>
			</div>

			<div
				style="height: 300px;background-color: #FFFFFF;border: 1px rgba(0, 0, 0,0.1) solid;border-radius: 10px;box-shadow: 0px 0px 5px rgb(0, 0, 0, 0.2);padding: 10px;">
				<el-row>
					<el-col :span="8" style="height: 300px;text-align: left;padding-right: 10px;">
						<div style="height: 20px;color: #a8a8a8;">一个月内最低价目的地</div>

						<div style="height: 270px;white-space:nowrap;margin-top: 10px;overflow-y: scroll;">
							<div v-for="(item,index) in flight" @mouseover="arc(item.city.lng,item.city.lat)"
								@mouseleave="cancellationArc()">

								<el-row>
									<el-col :span="7">
										<el-image style="height: 100px;border-radius: 5px;" :src="item.src"
											fit="cover"></el-image>
									</el-col>
									<el-col :span="17" style="height: 100px;padding-left: 15px;">
										<div style="height: 30px;">
											<div
												style="font-size: 18px;font-weight: 700;display: inline-block;width: 50%;">
												{{item.city.city_name}}
											</div>
											<a href="/MapQuery" style="text-decoration:none;">
												<div
													style="display: inline-block;width: 50%;text-align: right;font-size: 15px;color: #a8a8a8;">
													更多航班<span style="font-family: 900;margin-left: 2px;"><i
															class="el-icon-arrow-right"></i></span>
												</div>
											</a>
										</div>
										<div style="height: 70px;">

											<div v-for="item2 in item.flight"
												style="margin-top: 10px;height: 25px;">
												<div
													style="display: inline-block;width: 50%;color: #595959;font-size: 13px;">
													{{dateNow(item2.departure)[1]}}
													{{dateNow(item2.departure)[0]}}去
												</div>
												<a href="javascript:;" style="text-decoration:none;"
													@click="switchSearch(item.city.city_name,item2.departure)">
													<div
														style="display: inline-block;width: 50%;text-align: right;font-size: 17px;font-weight: 900;color: rgba(0, 170, 255);">
														￥{{item2.flightPrice.economy_price}}
													</div>
												</a>
											</div>
											
											<div v-if="item.flight.length<2"
												style="margin-top: 10px;height: 25px;font-size: 14px;color: #989898;">
												暂时没有更多单程航班数据
											</div>

										</div>
									</el-col>
								</el-row>

								<hr v-if="(index+1)!==flightNumber"
									style="border: none;border-bottom: 1px rgb(168, 168, 168, 0.3) solid;width: 80%;float:right;margin-top: 10px;margin-bottom: 10px;">

							</div>

							<div v-if="flight.length===0">
								<el-empty description="没有查到航班"></el-empty>
							</div>
						</div>
					</el-col>
					<el-col :span="16" style="height: 300px;">
						<baidu-map class="baiduMap" @ready="handler" :key="renew">
							<bml-curve-line :points="points" :editing="true" strokeStyle="dashed"
								:strokeWeight="3"></bml-curve-line>

							<bm-overlay pane="labelPane" @draw="draw" class="sample">
								<div style="background: rgba(0, 170, 255);padding: 5px;">
									<svg width="25" height="25" viewBox="0 0 48 48" fill="none">
										<path
											d="M22 29L13.7763 33.1118C12.6994 33.6503 11.4049 33.4927 10.4886 32.7117L4 27.1808L7.56226 25.8157C8.19869 25.5718 8.8992 25.5519 9.54846 25.7592L12.8273 26.8063C13.5787 27.0463 14.3944 26.9807 15.0977 26.6237L37.36 15.3248C37.7807 15.1113 38.2459 15 38.7177 15H44L42.4472 18.1056C42.1569 18.6862 41.6862 19.1569 41.1056 19.4472L32 24"
											stroke="#fff" stroke-width="4" stroke-linecap="round"
											stroke-linejoin="round" />
										<path d="M22.0007 29L18.0003 31L23.0003 41L32.0003 24" stroke="#fff"
											stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
										<path d="M17 25L12 16L28 20" stroke="#fff" stroke-width="4"
											stroke-linecap="round" stroke-linejoin="round" />
									</svg>
								</div>
								<div align="center">
									<div
										style="width: 0;height: 0;border-top: 7px solid rgba(0, 170, 255);border-left: 7px solid transparent;border-right: 7px solid transparent;">
									</div>
								</div>
							</bm-overlay>

							<bm-overlay pane="labelPane" @draw="drawtwo($event,item.city.lng,item.city.lat)"
								class="sample" v-for="item in flight"
								@mouseover.native="arc(item.city.lng,item.city.lat)"
								@mouseleave.native="cancellationArc()">
								<div
									style="width: 70px;height: 40px;background-color: rgba(0, 170, 255);padding-top: 5px;padding-bottom: 5px;color: #FFFFFF;">
									<div style="text-align: center;font-weight: 900;font-size: 14px;">
										￥{{item.flight[0].flightPrice.economy_price}}
									</div>
									<div style="font-size: 12px;text-align: center;font-weight: 900;">
										{{item.city.city_name}}
									</div>
								</div>
								<div align="center">
									<div
										style="width: 0;height: 0;border-top: 7px solid rgba(0, 170, 255);border-left: 7px solid transparent;border-right: 7px solid transparent;">
									</div>
								</div>
							</bm-overlay>

						</baidu-map>
					</el-col>
				</el-row>
			</div>

		</div>
	</div>

</template>

<script>
	import axios from 'axios';
	import {
		BmlCurveLine
	} from 'vue-baidu-map'

	export default {
		props: ["dateCalendar"],
		watch: {
			dateCalendar: {
				handler(newVal) {
					var cityName = document.getElementById("cityName");
					if (cityName) {
						if (!cityName.contains(event.target)) {
							this.cityNameIs = false;
						}
					}
				},
				deep: true
			},
			cityName: {
				handler(newVal) {
					this.flightMap();
				},
				deep: true
			}
		},
		created(){
			this.initialization();
		},
		data() {
			return {
				center: {
					lng: 113.08755,
					lat: 28.25182
				},
				flight: [],
				points: [],
				flightNumber: 0,
				cityName: "全中国",
				cityList: [],
				cityNameIs: false,
				departure: "",
				renew: new Date().getTime()
			}
		},
		components: {
			BmlCurveLine
		},
		methods: {
			initialization(){
				
				this.points=[];
				
				var city = sessionStorage.getItem("cityName");
				if (city == null || city === undefined || city === "undefined") {
					this.departure = '长沙';
				} else {
					this.departure = city
				}
				
				
				var cityData = sessionStorage.getItem("city");
				var cityList = sessionStorage.getItem("cityArray");
				if (cityData != null && cityList!=null) {
					this.cityList = JSON.parse(cityData);
					
					cityList=JSON.parse(cityList);
					for(var i=0;i<cityList.length;i++){
						if(cityList[i].city_name===this.departure){
							this.center={
								"lng":cityList[i].lng,
								"lat":cityList[i].lat
							}
							break;
						}
					}
					
					this.flightMap();
				} else {
					var nameContainer = {};
					axios.post("api/CityAction/cityList")
						.then((res) => {
							if (res.data.code === 200) {
								var cityArray = res.data.data;
								for (var i = 0; i < cityArray.length; i++) {
									if (nameContainer[cityArray[i].letter] == null) {
										nameContainer[cityArray[i].letter] = {
											"name": cityArray[i].letter,
											"data": []
										}
										nameContainer[cityArray[i].letter].data.push(cityArray[i]);
									} else {
										nameContainer[cityArray[i].letter].data.push(cityArray[i]);
									}
								}
								sessionStorage.setItem('city', JSON.stringify(nameContainer));
								sessionStorage.setItem('cityArray', JSON.stringify(cityArray));
								for(var i=0;i<cityArray.length;i++){
									if(cityArray[i].city_name===this.departure){
										this.center={
											"lng":cityArray[i].lng,
											"lat":cityArray[i].lat
										}
										break;
									}
								}
								this.flightMap();
							}
						});
				}
			},
			timeExtraction(date) {
				var time = date;
				var Y = time.getFullYear();
				var M = time.getMonth();
				M = (M + 1) < 10 ? '0' + (M + 1) : (M + 1);
				var d = time.getDate();
				d = d < 10 ? '0' + d : d;
				return Y + "-" + M + "-" + d;
			},
			flightMap() {

				var start = new Date();
				var end = new Date();
				end.setTime(end.getTime() + 30 * 24 * 60 * 60 * 1000);
				start.setTime(start.getTime() + 1 * 24 * 60 * 60 * 1000)

				var jsonObject = {
					"departure": this.departure,
					"destination": [this.cityName],
					"start": this.timeExtraction(new Date(start)),
					"end": this.timeExtraction(new Date(end)),
				};

				axios.post("api/FlightAction/flightMap", JSON.stringify(jsonObject), {
						headers: {
							'Content-Type': 'application/json'
						}
					})
					.then((res) => {
						if (res.data.code === 200) {
							if (res.data.data != undefined) {
								var data = res.data.data;
								for (var i = 0; i < data.length; i++) {
									data[i].src = require("../static/img/cityImg/" + data[i].city.city_name + ".png");
								}
								this.flight = data;
								this.flightNumber = this.flight.length;
							} else {
								this.flight = [];
							}
						}
						this.renew = new Date().getTime();
					})
			},
			handler({
				BMap,
				map
			}) {
				var point = new BMap.Point(this.center.lng, this.center.lat)
				map.centerAndZoom(point, 5);
				map.enableScrollWheelZoom()
			},
			draw({
				el,
				BMap,
				map
			}) {
				const pixel = map.pointToOverlayPixel(new BMap.Point(this.center.lng, this.center.lat))
				el.style.left = pixel.x - 17 + 'px'
				el.style.top = pixel.y - 50 + 'px'
			},
			drawtwo(event, lng, lat) {
				var el = event.el;
				var map = event.map;
				const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
				el.style.left = pixel.x - 35 + 'px'
				el.style.top = pixel.y - 62 + 'px'
			},
			arc(lng, lat) {
				var cre = new Array(2);
				cre[0] = {
					lng: this.center.lng,
					lat: this.center.lat
				};
				cre[1] = {
					lng: lng,
					lat: lat
				};
				this.points = cre;
			},
			cancellationArc() {
				this.points = [];
			},
			checkAbc(name) {
				var reg = /^[A-Za-z]+$/;
				return reg.test(name);
			},
			dateNow(date) {
				var time = new Date(date);
				var Y = time.getFullYear();
				var M = time.getMonth();
				M = (M + 1) < 10 ? '0' + (M + 1) : (M + 1);
				var d = time.getDate();
				d = d < 10 ? '0' + d : d;
				var week = new Array("日", "一", "二", "三", "四", "五", "六");
				return new Array("周" + week[time.getDay()], M + "-" + d);
			},
			destinationSelect(cityName) {
				if (cityName === this.departure) {
					return;
				}
				this.cityName = cityName;
			},
			switchSearch(cityName, date) {
				sessionStorage.setItem("cityNameTwo", cityName);
				sessionStorage.setItem("cityName", this.departure);
				sessionStorage.setItem("departureDate", this.dateNowTwo(new Date(date), 1));
				sessionStorage.setItem("returnDate", this.dateNowTwo(new Date(date), 0));
				location.href = "/Search";
			},
			dateNowTwo(date, isday) {
				var time = date;
				if (isday == 0) time.setTime(time.getTime() + 1 * 24 * 60 * 60 * 1000);
				var Y = time.getFullYear();
				var M = time.getMonth();
				M = (M + 1) < 10 ? '0' + (M + 1) : (M + 1);
				var d = time.getDate();
				d = d < 10 ? '0' + d : d;
				var week = new Array("日", "一", "二", "三", "四", "五", "六");
				return new Array(Y + "-" + M + "-" + d, "星期" + week[time.getDay()], time, M + "-" + d);
			}
		}
	}
</script>

<style>
	.baiduMap {
		height: 300px;
		width: 100%;
	}

	.sample {
		position: absolute;
	}

	.col:hover {
		color: #00ABFF;
		background-color: rgb(0, 171, 255, 0.1);
	}
</style>